<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        html,body{
            height: 100%;
            width: 100%;
            background-image: url(../img/url.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .nav .sp {
            width: 70%;
        }
        .nav{
            width: 100%;
            height: 50px;
            background-color: gray;
            display: flex; 
            justify-content: left; 
            align-items: center;
            color: aliceblue;
        }
        /* 头像 */
        .nav img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-left: 8px;
            margin-right: 8px;
            margin-top: 0px;
        }
        .nav a{
            color: aliceblue;
            text-decoration: none;
            margin-left: 8px;
            margin-right: 8px;
        }
        .nav a:hover{
            color: blue;
        }
        .add{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            height: calc(100% - 50px);
            width: 100%; 
        }
        .add .add-left{
            height: 100%;
            width: 30%;
            background-color: rgba(255,255,255,0.8);
        }
        .add .add-right{
            height: 100%;
            width: 70%;
            background-color: rgba(255,255,255,0.8);
            overflow: auto;
        }
        .cren{
            margin-top: 10px;
            width: 60%;
            height: 50%;
            background-color: rgba(255,255,255,0.8);
            margin-left: 90px;
            margin-right: 10px;
            border-radius: 15px;
        }
        .cren img{
            
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: block;  /* 将图片转为块级元素 */
            margin: 10px auto 0; 	 /* 上	外边距20px，左右自动居中，下外边距0 */
        }
        .cren h3{	
            text-align: center;
        }
        .cren a{
            margin-bottom: 10px;
            display: block;
            text-align: center;
            color: darkgrey;
            text-decoration: none;
        }
        .cren a:hover{
            color: blue;
        }
        .cren .kko{
            display: flex;
            justify-content: space-around;
        }
        .bolg{
            width: 100%;
            background-color: rgba(255,255,255,0.8);
            border-radius: 15px;
            margin-top: 10px;
        }
        .bolg .ti{
            font-size: 20px;
            font-weight: 900;
            text-align: center;
            padding-top: 20px;
        }
        .bolg .data{
            padding-bottom: 10px;
            padding-top: 10px;
            color: rgb(1, 136, 16);
            text-align: center;
        }
        .bolg .desc{
            text-indent: 2em;
            line-height: 30px;
            margin-top: 20px;
        }
        .bolg .deli{
            display: block;
            color: black;
            text-align: center;
            width: 140px;
            height: 40px;
            margin: 10px auto 0px auto;
            border: 2px solid black;

            /* line-height: 40px; */
            text-decoration: none;
        }
        .bolg .deli:active{
            color: brown;
        }
        .学校{
            font-size: 12px;
            text-align: center;
        }
        .文章数量{
            font-size: 17px; 
            text-align: center;
        }
    </style>                                                                                                                                                                                                         
</head>

<body>
    <div class="nav">
        <img src="./img/kko.jpg" alt="">
        <span>个人博客</span>
        <span class="sp"></span> 
        <a href="主页.html">主页</a>
        <a href="个人中心.html">个人中心</a>
        <a href="登录.html">退出登录</a>
    </div>
    <div class="add">
        <div class="add-left">
            <div class="cren">
                <img src="./img/kko.jpg" alt="">
                <h3>方建平</h3>
                <a href="#">gitee地址</a>
                <p class="文章数量">文章数量: 3</p>
                <p class="学校">学校:广西工程职业技术学院</p>
            </div>
        </div>
        <div class="add-right">
            <div class="bolg">
                <div class="ti">
                    <h2>Linux 指令</h2>
                </div>
                <div class="data">
                    <p>时间: 2025-05-01</p>
                </div>
                <div class="desc">
                    <p>Linux基础指令：cd进入目录，ls输出当前目录下的文件，touch创建普通文件，mkdir创建目录，cp复制文件或目录，mv移动文件或目录</p>
                </div>
                <a class="deli" href="内容1.html">查看全文</a>
                <div class="ti">
                    15 个有趣好玩的linux shell 命令
                </div>
                <div class="data">
                    时间: 2025-05-01
                </div>
                <div class="desc">
                    今天介绍一些有趣的linux shell命令，所有的命令都可以使用man + 命令名称 来查看完整的使用方法。
                </div>
                <a class="deli" href="内容2.html?blogId=1">查看全文</a>
                <div class="ti">
                    C++list使用
                </div>
                <div class="data">
                    时间: 2025-05-01
                </div>
                <div class="desc">
                    list底层就是一个双向循环链表。
                </div>
                <a class="deli" href="内容3.html?blogId=1">查看全文</a>
            </div>
        </div>
    </div>
</body>

</html>
